<template>
  <div class="pifajia1">
    <div class="left">
      <a-menu
        mode="inline"
        :open-keys="openKeys"
        style="width: 200px"
        @openChange="onOpenChange"
      >
        <a-sub-menu key="sub1">
          <span slot="title"><a-icon type="search" /><span>算例</span></span>
          <a-menu-item key="1"> 整数01背包问题 </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </div>
    <div class="right">
      <div class="description">
        <h3>问题描述:</h3>
        <p>参考课件中的背包问题，求出背包问题的最优解向量和值。</p>
        <p>（额外条件：所有物品体积均为整数）</p>
      </div>
      <div class="parameter">
        <h3>输入:</h3>
        <div class="pictures"></div>
        <div class="dataNum">
          <span>背包总体积𝑉= <a-input v-model="V" /></span>
          <span>v<sub>1</sub>= <a-input v-model="v1" /></span>
          <span>v<sub>2</sub>= <a-input v-model="v2" /></span>
          <span>v<sub>3</sub>= <a-input v-model="v3" /></span>
          <span>w<sub>1</sub>= <a-input v-model="w1" /></span>
          <span>w<sub>2</sub>= <a-input v-model="w2" /></span>
          <span>w<sub>3</sub>= <a-input v-model="w3" /></span>
        </div>
      </div>
      <div class="functions">
        <h3>关键函数：</h3>
      </div>
      <div class="compute">
        <div class="button">
          <a-button type="primary" @click="compute"> 计算 </a-button>
        </div>
      </div>
      <div class="result">
        <a-card style="width: 480px">
          <span style="margin-right: 30px">x<sub>1</sub>:{{ res.x1 }}</span>
          <span style="margin-right: 30px">x<sub>2</sub>:{{ res.x2 }}</span>
          <span style="margin-right: 30px">x<sub>3</sub>:{{ res.x3 }}</span>
          <span style="margin-right: 30px">获得最大价值W:{{ res.W }}</span>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rootSubmenuKeys: ["sub1", "sub2", "sub4"],
      openKeys: ["sub1"],
      V: 9,
      v1: 3,
      v2: 4,
      v3: 5,
      w1: 8,
      w2: 10,
      w3: 12,
      picArr: [],
      res: {},
    };
  },
  mounted() {
    this.V = this.$store.state.ExampleData[0].params[0].default_value;
    this.v1 = this.$store.state.ExampleData[0].params[1].default_value;
    this.v2 = this.$store.state.ExampleData[0].params[2].default_value;
    this.v3 = this.$store.state.ExampleData[0].params[3].default_value;
    this.w1 = this.$store.state.ExampleData[0].params[4].default_value;
    this.w2 = this.$store.state.ExampleData[0].params[5].default_value;
    this.w3 = this.$store.state.ExampleData[0].params[6].default_value;
  },
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    compute() {
      this.axios
        .post("/course/calc_example/", {
          example_key: this.$store.state.ExampleKey,
          param: {
            V: this.V,
            v1: this.v1,
            v2: this.v2,
            v3: this.v3,
            w1: this.w1,
            w2: this.w2,
            w3: this.w3,
          },
        })
        .then((res) => {
          this.res = res;
        });
    },
  },
};
</script>

<style lang="scss">
.pifajia1 {
  display: flex;
  .right {
    // background-color: skyblue;
    flex: 1;
    .description {
      padding: 0px 20px 0 20px;
      span {
        display: block;
        margin-bottom: 10px;
      }
    }
    .parameter {
      padding: 0 20px 20px 20px;
      span {
        display: inline-block;
        margin-bottom: 10px;
      }
      .pictures {
        margin-bottom: 10px;
      }
      .dataNum {
        display: flex;
        justify-content: space-between;
      }
      .ant-input {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-variant: tabular-nums;
        list-style: none;
        font-feature-settings: "tnum";
        position: relative;
        display: inline-block;
        width: 80px;
        height: 32px;
        padding: 4px 11px;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        line-height: 1.5;
        background-color: #fff;
        background-image: none;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        transition: all 0.3s;
      }
    }
    .functions {
      padding: 0 20px 20px 20px;
    }
    .compute {
      padding-right: 20px;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      border-bottom: 1px solid #ccc;
      .button {
        margin-bottom: 10px;
      }
    }
    .result {
      margin-top: 20px;
      .ant-card-meta-title {
        overflow: hidden;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        font-size: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
      }
    }
  }
}
</style>